<template>
  <div class="purchase_echart">
    <van-nav-bar
      title="采购管理"
      @click-left="goBack"
      @click-right="showTable"
      fixed
      :border="true"
      :z-index="100"
      class="my-nav-bar"
    >
      <span class="el-icon-arrow-left fontsize" slot="left"></span>
      <span class="van-nav-bar__right ai_report_nav_img" slot="right">
        <img src="../../../../assets/imgs/screen.png" alt>
      </span>
    </van-nav-bar>

    <popup-screening :showPopup="showMeTable" @searchFrom="searchFrom" :showTask="false" :showFloor="false" @showPopup="(val)=>{showMeTable=val}" v-if="active==0"></popup-screening>

    <!-- 导航右侧图标--模态框 -->
    <popupScreeningDIY :showPopup="showMeTable" :data="[{label: '选择节点名称', children: this.ResourceList}]" @showPopup="(val)=>{showMeTable=val}" @sure="popupScreeningDIYSure" ref="popupScreeningDIY" v-if="active==1"></popupScreeningDIY>
    <!-- <div v-show="showMeTable" class="purchase_echart_model" v-if="active==1">

      <van-radio-group v-model="ResourceName">
        <van-cell-group>
          <van-radio
            v-for="(item ,index) in ResourceList"
            v-bind:key="index"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-cell-group>
      </van-radio-group>

      <div class="ai_report_order_foot">
        <div @click="resetFrom()">重置</div>
        <div @click="searchFrom()">确定</div>
      </div>
    </div> -->

    
    <!-- 关闭左右滑动--swipeable -->
    <van-tabs v-model="active" class="my-tabs">
      <van-tab title="物资采购总览" class="purchase_echart_tabs">
        <div>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text = "没有更多了"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            class="my-list"
            @load="getDataList"
          >
            <el-table
              stripe
              style="width:100%;"
              :data="buyThingTable"
              :header-cell-style="{'background-color':'#5A92FF','color':'#ffffff','border':'none'}"
              @row-click="openAnalysis"
            >
              <el-table-column prop="" label="物资名称" align="center">
                <template slot-scope="scope">
                   {{(scope.row.ResourceName?scope.row.ResourceName:'/')+(scope.row.Spec?scope.row.Spec:'/')}}
                </template>
              </el-table-column>
              <el-table-column prop="" label="施工预算量" align="center">
                <template slot-scope="scope">
                   {{scope.row.AdjustBOQ?scope.row.AdjustBOQ:'/'}}{{scope.row.AdjustBOQ?scope.row.Unit:''}}
                </template>
              </el-table-column>
              <el-table-column prop="" label="入库总量" align="center">
                <template slot-scope="scope">
                   {{scope.row.InNum?scope.row.InNum:'/'}}{{scope.row.InNum?scope.row.Unit:''}}
                </template>
              </el-table-column>
              <el-table-column prop="" label="库存" align="center">
                <template slot-scope="scope">
                   {{scope.row.StoreNum?scope.row.StoreNum:'/'}}{{scope.row.StoreNum?scope.row.Unit:''}}
                </template>
              </el-table-column>
              <el-table-column prop="OverNum" label="节超" align="center"></el-table-column>
            </el-table>
          </van-list>
        </div>
      </van-tab>
      <van-tab title="物资统计分析" class="purchase_echart_tabs">
        <div class="purchase_span purchase_flex">
          <span>{{(ResourceName || '/')+(Spec || '/')}}</span>
          <a href="javascript:;" @click="actionsheetYear" class="purchase_y">{{year}}年</a>
        </div>
        <div class="purchase_span_line"></div>
        <!-- 折线图组件 -->
        <div class="purchaseImg">
          <EchartImg :plan_table="table3" :subtext="subtext"></EchartImg>
        </div>

        <div class="purchase_span">
          <span>材料出入库情况</span>
        </div>
        <el-table
          style="width:100%;box-sizing:border-box;"
          :summary-method="getSummaries"
          show-summary
          :span-method="objectSpanMethod"
          :data="allTable"
          :header-cell-style="{'background-color':'#5A92FF','color':'#ffffff'}"
          stripe
        >
          <el-table-column label="入库" align="center">
            <el-table-column prop="InDate" label="时间" align="center"></el-table-column>
            <el-table-column prop="InNum" label="数量" align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="出库" align="center">
            <el-table-column prop="OutDate" label="时间" align="center"></el-table-column>
            <el-table-column prop="OutNum" label="数量" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="StoreNum" label="存库" align="center"></el-table-column>
          <el-table-column prop="AdjustBOQ" label="节超" align="center"></el-table-column>
        </el-table>
      </van-tab>
    </van-tabs>

    <van-popup v-model="popupShow" position="bottom">
      <van-picker
        show-toolbar
        :title="pickerTitle"
        :columns="columns"
        :loading="pickerLoading"
        :value-key="value_key"
        @cancel="popupShow = false"
        @confirm="onConfirm"
        class="my-picker"
      />
    </van-popup>
  </div>
</template>
<script>
import EchartImg from "./EchartImg";
import popupScreening from "@/components/common/DropdownScreening/popupScreening";
import popupScreeningDIY from "@/components/common/DropdownScreening/popupScreeningDIY";
import {
  getBuildList,
  getSpecialtyList,
  getFloorList,
  getResourceList,
  getCollectList,
  clearSel,
  getResourceInfo,
  getResourceName,
  getResourceMonthInfo
} from "../../../../assets/js/scopeManage.js";
import { QueryResourceSumView } from '@/api/api'

export default {
  components: { EchartImg, popupScreening, popupScreeningDIY },
  data() {
    return {
      PATHS: "",
      loading: false,  //是否处于加载状态
      finished: false,  //是否已加载完成
      error: false,  //是否加载失败，加载失败后点击错误提示可以重新触发load事件，必须使用sync修饰符

      year: new Date().getFullYear(),
      popupShow: false,  //弹出层是否显示
      pickerLoading: false,  //是否显示加载状态
      pickerTitle: "",  //顶部栏标题
      value_key: "",  //选项对象中，文字对应的 key
      columns: [],  //对象数组，配置每一列显示的数据
      
      BuildNameList: [],
      SpecialtyList: [],
      FloorbyList: [],
      ResorceNameList: [],
      options: {
        ProjectID: localStorage.getItem("projectid"),
        BuildName: "全部", // 楼栋
        Specialty: "", // 专业
        Floor: "", // 楼层
        CatagoryName: "", // 物资类别
        Name: "" // 查询内容
      },
      buyThingTable: [],
      ResourceName: "",
      Spec: "",
      ResourceList: [],

      active: 0, //左右滑块
      showMeTable: false, //导航右边图标---显示查询条件
      activeName: "1", //导航右边图标---显示模板的手风琴
      selectName: "", //专业
      contextBySelect: "", // 物资类别
      glassBySelect: "", //楼栋
      classBySelect: "", //楼层
      buyingSelect: "", //已完成采购
      //专业
      textNameColl: [
        { value: "1", name: "全部" },
        { value: "2", name: "建筑专业" },
        { value: "3", name: "结构专业" },
        { value: "4", name: "暖通系统" },
        { value: "5", name: "通风系统" },
        { value: "6", name: "弱电系统" },
        { value: "7", name: "强电系统" }
      ],
      // 物资类别
      contextSelect: [
        { value: "1", name: "全部" },
        { value: "2", name: "门" },
        { value: "3", name: "混泥土" },
        { value: "4", name: "水泥" },
        { value: "5", name: "钢筋" }
      ],
      // 楼栋
      glassSelect: [
        { value: "1", name: "A1" },
        { value: "2", name: "A2" },
        { value: "3", name: "A3" },
        { value: "4", name: "A4" },
        { value: "5", name: "A5" }
      ],
      // 楼层
      classSelect: [
        { value: "1", name: "1楼" },
        { value: "2", name: "2楼" },
        { value: "3", name: "3楼" },
        { value: "4", name: "4楼" },
        { value: "5", name: "5楼" }
      ],
      //已完成采购
      buyingThing: [
        { value: "1", name: "采购中" },
        { value: "2", name: "未采购" }
      ],
      //物资种类--Echart图
      allThing: "",
      allThingList: [
        { value: "1", name: "c20混凝土" },
        { value: "2", name: "门" },
        { value: "3", name: "c30混凝土" }
      ],
      //echarts数据格式
      table3: [
        {
          name: "出库量",
          type: "line",
          color: "#2C77CE",
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: "采购量",
          type: "line",
          color: "#499341",
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }
      ],
      subtext: '',
      //出入库材料表格
      allTable: [],
      paging: { page: 1, rows: 12 },
    };
  },
  created() {
    this.PATHS = config.fileUrl;
    // this.getDataList();
    getBuildList(this, res => {
      this.BuildNameList = res.map(item => {
        return {
          name: item.text,
          value: item.id
        };
      });
      this.BuildNameList.splice(0, 1);
    });
    getResourceName(this, res => {
      this.ResourceList = res.map((item, index) => {
        return {
          label: (item.text || '/')+(item.code || '/'),
          value: (item.text || '/')+'-*-'+(item.code || '/')
        };
      });
    });
  },
  watch: {
    "options.BuildName"(val) {
      if (val != "") {
        clearSel(this, 1);
        getSpecialtyList(this, res => {
          this.SpecialtyList = res.map(item => {
            return {
              name: item.text,
              value: item.id
            };
          });
          this.SpecialtyList.splice(0, 1);
        });
      }
    },
    "options.Specialty"(val) {
      if (val != "") {
        clearSel(this, 2);
        getFloorList(this, res => {
          this.FloorbyList = res.map(item => {
            return {
              name: item.text,
              value: item.id
            };
          });
          this.FloorbyList.splice(0, 1);
        });
      }
    },
    "options.Floor"(val) {
      if (val != "") {
        clearSel(this, 3);
        getResourceList(this, res => {
          this.ResorceNameList = res.map(item => {
            console.log(item)
            return {
              name: item.text,
              value: item.id
            };
          });
        });
      }
    },
    ResourceName(val) {
      if (val !== "") {
        this.getResourceMonthInfo();
        this.getYearInfo();
      } else {
        this.searchFrom()
      }
    },
    active(val) {
      if (val === 1) {
        this.$nextTick(()=>{
          this.$refs.popupScreeningDIY.resetSelectName([(this.ResourceName || '/')+'-*-'+(this.Spec || '/')])
        })
      }
    }
  },
  methods: {
    // 获取数据
    getDataList() {
      let options = this.options
      options.ResourceName = ''
      options.Spec = ''
      if (this.options.BuildName === "全部") {
        options.BuildName = ''
      }
      QueryResourceSumView(Object.assign(options, this.paging)).then((res)=>{
        if (res.StatusCode === 200) {
          if (options.page === 1 && res.Detiel.length > 0) {
            this.ResourceName = res.Detiel[0].ResourceName//默认设置物资统计分析为第一条
            this.Spec = res.Detiel[0].Spec
          }
          this.showMeTable = false;
          this.total = Number(res.Count);
          this.buyThingTable.push(...res.Detiel);
          // 数据全部加载完成
          if (this.paging.page * this.paging.rows >= res.Count) {
              this.finished = true;
          }else{
              this.finished = false;
          }
          this.paging.page += 1;
        }else{
          this.$toast({
            type: 'fail',
            message: res.message ? res.message : '后台异常',
            className: "my-toast"
          })
        }
        this.loading = false;
      })
      // getCollectList(this, Object.assign(par, this.paging), res => {
      //   console.log(res)
      //   this.ResourceName = res[0].ResourceName//默认设置物资统计分析为第一条
      //   this.showMeTable = false;
      //   this.total = Number(res.Count);
      //   this.buyThingTable.push(...res);
      // });
    },
    //返回
    goBack() {
      this.$router.push({ path: "/nav/to/index" });
    },
    //右侧导航栏的图标点击
    showTable() {
      this.showMeTable = !this.showMeTable;
    },
    //根据页面的滑动--清掉某些值(模态框)
    resetFrom() {
      if (this.active == 0) {
        this.options = {
          BuildName: "",
          Specialty: "",
          Floor: "",
          CatagoryName: ""
        };
      } else {
        this.allThing = ""; //物资种类--Echart图
        this.ResourceName = "";
      }
    },
    //根据页面的滑动--模态框--点击确定查询
    searchFrom(v) {
      this.paging.page = 1;
      Object.assign(this.options, v)
      if (this.active) {
        this.getResourceMonthInfo();
        this.getYearInfo();
      } else {
        this.buyThingTable = [];
        this.getDataList();
      }
    },
    //材料出入库表格---合并项
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 4 || columnIndex === 5) {
        if (rowIndex == 0) {
          return {
            rowspan: this.allTable.length + 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    //材料出入库表格---总计合并
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0 || index === 2) {
          sums[index] = "总量";
          return;
        } else if (index === 4 || index === 5) {
          sums[index] = "";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    // 获取年度物资采购信息-表格
    getYearInfo() {
      getResourceInfo(this, res => {
        this.showMeTable = false;
        res.forEach(item => {
          item.InDate = item.InDate
            ? require("moment")(item.InDate).format("YYYY/MM/DD")
            : "/";
          item.OutDate = item.OutDate
            ? require("moment")(item.OutDate).format("YYYY/MM/DD")
            : "/";
        });
        this.allTable = res;
      });
    },
    // 获取年度物资采购信息-折线图
    getResourceMonthInfo() {
      getResourceMonthInfo(this, res => {
        let datas = [
          {
            name: "出库量",
            type: "line",
            color: "#2C77CE",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: "采购量",
            type: "line",
            color: "#499341",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ];
        res.yearsumreport.forEach((el, index) => {
          datas[0].data[el.Month - 1] = el.OutNum;
          datas[1].data[el.Month - 1] = el.InNum;
        });
        // this.$set(this.table3, "yData", datas);
        this.table3 = datas;
        this.subtext = res.yearsumreport[0].Unit
        console.log(this.table3);
      });
    },
    /**
     * @name 点击采购列表，查看物资统计分析
     */
    openAnalysis(row){
      this.active = 1;
      this.ResourceName = row.ResourceName
      this.subtext = row.Unit
      this.Spec = row.Spec
    },
    actionsheetYear() {
      this.pickerTitle = "年"
      this.popupShow = true;
      let date = new Date;
      let year = date.getFullYear();
      let years = []
      for(let i = 0; i < 6; i++){
        years.push(Number(year) - i)
      }
      this.columns = years;
    },
    /**
     * @name 点击picker选择器完成按钮时触发
     */
    onConfirm(value, index){
      switch (this.pickerTitle) {
        case "年":
          {
            this.year = value;
            this.popupShow = false;
            this.getYearInfo();
            this.getResourceMonthInfo();
          }
          break;
      
        default:
          break;
      }
    },
    popupScreeningDIYSure (val) {
      let _ResourceName = val[0].split('-*-')[0] === '/' ? '' : val[0].split('-*-')[0];
      this.Spec = val[0].split('-*-')[1] ==='/' ? '' : val[0].split('-*-')[1]
      if (this.ResourceName === _ResourceName) {
        if (this.ResourceName !== "") {
          this.getResourceMonthInfo();
          this.getYearInfo();
        } else {
          this.searchFrom()
        }
      } else {
        this.ResourceName = _ResourceName
      }
    }
  }
};
</script>
<style>
@import "~@/assets/css/resetVant.css";
.purchase_echart .el-table__empty-block{
  display: none
}
.purchase_echart {
  width: 100%;
  height: 100%;
  padding-top: 88px;
  box-sizing: border-box;
}
/* 表格样式更改 */

.purchase_echart .el-table th > .cell,
.container-procurement-list .temporary thead th {
  font-size: 28px;
}
.purchase_echart .purchase_echart_tabs {
  /* height: 60px;
  line-height: 60px; */
  font-size: 30px;
}
/* 顶部表头 */
.purchase_echart .ai_report_nav_img img {
  height: 37px;
  width: 41px;
}
/* .purchase_echart .van-nav-bar .van-nav-bar__title {
  font-size: 36px;
}
.purchase_echart .van-nav-bar {
  height: 88px;
  line-height: 88px;
}
.purchase_echart .ai_report_nav_img {
  float: right;
  position: relative;
  top: 10px;
}
.purchase_echart_tabs {
  height: 1130px;
  width: 100%;
  background-color: #ffffff;
} */

/* 左右滑动标签页的样式更改 */
.purchase_echart .van-tabs__line {
  background-color: #5b8dee;
}
/* .purchase_echart .van-tabs--line .van-tabs__wrap {
  height: 88px;
}
.purchase_echart .van-tabs--line .van-tabs__nav {
  height: 88px;
}
.purchase_echart .van-ellipsis {
  width: 100%;
  color: #6b6b6b;
  height: 88px;
  font-size: 28px;
  line-height: 88px;
  font-family: PingFang-SC-Bold;
} */
.purchase_echart .van-tabs__nav .van-tab--active .van-ellipsis {
  color: rgba(91, 140, 238, 1);
}
.purchase_echart .van-tabs--line {
  padding-top: 110px;
}
/* 表格样式更改 */
.purchase_echart .el-table .cell {
  /* height: 60px; */
  /* line-height: 60px; */
      padding: 15px 0;
  font-size: 24px;
}
.purchase_echart .el-table .table_input {
  border: 2px solid #5893ff;
}

/* 右图标弹框样式 */
.purchase_echart_model {
  position: fixed;
  width: 356px;
  z-index: 200;
  max-height: 940px;
  right: 20px;
  top: 88px;
  background-color: rgba(34, 40, 50, 1);
  border-radius: 8px;
  padding: 20px;
  color: #ffffff;
  font-size: 30px;
  overflow: auto;
}
.purchase_echart_model .ai_report_border {
  width: 0;
  height: 0;
  border-width: 0 16px 16px;
  border-style: solid;
  border-color: transparent transparent #222832; /*透明 透明  灰*/
  position: relative;
  display: inline-block;
  top: -48px;
  left: 330px;
}
.purchase_echart_model .ai_report_list {
  width: 100%;
  height: 88px;
  line-height: 88px;
  box-sizing: border-box;
}
.purchase_echart_model .ai_report_list_border {
  border-bottom: 2px solid #ffffff;
}
.purchase_echart_model .ai_report_list_time > span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #eaebed;
  color: #333;
  padding-left: 8px;
  border-radius: 6px;
}
.purchase_echart_model .ai_report_list_time {
  width: 100%;
  height: 70px;
  line-height: 70px;
  box-sizing: border-box;
  padding: 5px 0;
}

.purchase_echart_model .van-cell {
  background-color: #222832;
  color: #ffffff;
  line-height: 45px;
  height: 60px;
  border-top: 2px solid #55595e;
  box-sizing: border-box;
  font-size: 30px;
}
.purchase_echart_model .van-collapse-item__content {
  background-color: #222832;
  color: #ffffff;
}

.purchase_echart_model .van-cell-group {
  background-color: #222832;
}
.purchase_echart_model .van-radio__label {
  line-height: 70px;
  font-size: 28px;
  color: #ffffff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.purchase_echart_model .van-radio__icon .van-icon {
  border: 2px solid #ffffff;
}

.purchase_echart_model .van-hairline--top-bottom::after {
  border: 0;
}
.purchase_echart_model .van-radio {
  border-top: 2px solid #55595e;
}
.purchase_echart_model .ai_report_order_foot {
  height: 80px;
  line-height: 40px;
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  padding: 20px 0;
}
.purchase_echart_model .ai_report_order_foot > div:first-child {
  float: left;
  width: 50%;
  box-sizing: border-box;
  border-right: 2px dashed #ffffff;
  text-align: center;
  cursor: pointer;
}
.purchase_echart_model .ai_report_order_foot > div:last-child {
  float: left;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}
.purchaseImg {
  width: 100%;
  height: 500px;
  box-sizing: border-box;
}
.purchase_flex{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.purchase_span {
  height: 80px;
  line-height: 80px;
  font-size: 30px;
  /* padding: 15px 0; */
}
.purchase_span_line{
  margin: 0 auto;
  width: 92%;
  border: 1px solid rgba(233,236,241,1);
  margin-bottom: 20px;
}
.purchase_flex span{
  line-height: 1;
}
.purchase_span span {
  margin-left: 20px;
  display: inline;
  border-left: 8px solid #5a92ff;
  padding-left: 20px;
}
.purchase_span .purchase_y{
  float: right;
  margin-right: 20px;
  background:rgba(255,255,255,1);
  border:2px solid rgba(37,119,227,1);
  border-radius:10px;
  padding: 5px 10px;
  line-height: 1;
  cursor: pointer;
}
.purchase_echart .my-radio{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.my-list .el-table--scrollable-x .el-table__body-wrapper{
  overflow-x: initial;
}
.my-list .el-table__body, .my-list .el-table__footer,.my-list .el-table__header{
  width: auto!important;
}
.el-table__header-wrapper .el-table__header,.el-table__body-wrapper .el-table__body,.el-table__body, .el-table__footer-wrapper .el-table__footer{width: 100%!important;}
.el-table__body, .el-table__footer, .el-table__header{table-layout:initial!important}
.my-tabs .el-table__footer-wrapper,.my-tabs  .el-table__header-wrapper {
    overflow: auto;
}
</style>
